<template>
  <div class="left-wrap">
    <p class="tip">* 双击选择组件</p>
    <div class="comp-item" v-for="item in formLabelType" :key="item.title">
      <h2>{{ item.title || '请输入标题' }}</h2>
      <ul class="flex">
        <li
          @dblclick="onSetFormItem(child)"
          v-for="child in item.content"
          :key="child.label"
        >
          <img :src="child.img" />
          <span>{{ child.label }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script setup lang="ts">
import { LabelItemType } from '../../types'
import { randomString } from '@/utils/utils.ts'
import useAppDevStore from '@/store/modules/member/app/develop.ts'
import { storeToRefs } from 'pinia'

const {
  formOptionData,
  formLabelType,
  optionForm,
  formItemKey,
  formItemIndexType,
  formItem,
} = storeToRefs(useAppDevStore())

// 双击生成表单
const onSetFormItem = (item: LabelItemType) => {
  optionForm.value = []
  formItemKey.value = randomString(5)
  formItemIndexType.value = item.setProp || false
  formItem.value.push({
    key: formItemKey.value,
    type: item.type,
    label: item.label,
    prop: formItemKey.value,
    handlerType: item.type,
    options: [],
    value: item.type === 'checkbox' ? [] : '',
  })
  for (const itemKey in formOptionData.value) {
    if (itemKey !== 'them') formOptionData.value[itemKey] = ''
  }
}
</script>

<style scoped lang="scss">
.left-wrap {
  width: 300px;
  padding: 30px 32px;
  background-color: #fff;

  .tip {
    margin-bottom: 10px;
    font-size: 12px;
    color: red;
  }

  .comp-item {
    margin-bottom: 40px;

    h2 {
      font-size: 14px;
      color: #021429;
    }

    ul {
      margin-top: 20px;

      li {
        display: flex;
        flex-direction: column;
        align-items: center;
        cursor: pointer;

        &:hover {
          span {
            color: #000;
          }
        }

        & + li {
          margin-left: 10px;
        }

        > img {
          width: 20px;
          height: 20px;
          margin-bottom: 10px;
          background-color: #eee;
        }

        span {
          font-size: 12px;
          color: #4e5969;
        }
      }
    }
  }
}
</style>
